<template>
  <div class="mycoupon-wrapper">
    <div class="user-com-tab">
      <span
        class="item"
        :class="{ on: tabCur == 'usable' }"
        @click="tabClick('usable')"
        >{{ $t(`page.users.userCoupon.available`) }}</span
      >
      <span
        class="item"
        :class="{ on: tabCur == 'unusable' }"
        @click="tabClick('unusable')"
        >{{ $t(`page.users.userCoupon.expired`) }}</span
      >
    </div>
    <div class="main-section" v-loading="loading">
      <div class="main-bd">
        <div class="list acea-row">
          <coupon :couponList="couponList"></coupon>
        </div>
        <div class="pages-box" v-if="total > 0">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="bindPageCur"
            :pageSize="limit"
            :total="total"
          >
          </el-pagination>
        </div>
        <div class="empty-box" v-if="couponList.length == 0 && !loading">
          <img src="~/assets/images/noCoupou.png" alt="" />
          <p>{{ $t(`page.users.userCoupon.empty`) }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import coupon from "@/components/coupon";
export default {
  name: "myCoupon",
  // middleware: 'useAuth',
  components: { coupon },
  data() {
    return {
      tabCur: "usable",
      list: [],
      couponList: [],
      loading: false,
      page: 1,
      limit: 9,
      total: 0,
    };
  },
  head() {
    return {
      title: this.$t(`page.users.userCoupon.navTitle`),
    };
  },
  filters: {
    timeYMD: function (value) {
      if (value) {
        var newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(value);
        return newDate[0];
      }
    },
  },
  beforeMount() {
    this.getCouponList();
  },
  methods: {
    tabClick(val) {
      this.page = 1;
      this.tabCur = val;
      this.getCouponList();
    },
    getCouponList() {
      this.loading = true;
      this.couponList = [];
      this.$axios
        .get("/api/front/coupon/list", {
          params: {
            type: this.tabCur,
            page: this.page,
            limit: this.limit,
          },
        })
        .then((res) => {
          this.couponList = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    goStore(item) {
      if (item.status == 0) {
        this.$router.push({ path: `/goods_coupon?id=${item.coupon_id}` });
      }
    },
    bindPageCur(data) {
      this.page = data;
      this.getCouponList();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.main-section {
  margin-top: 30px;

  .main-bd {
    margin-top: 15px;
    margin-left: 17px;
  }

  .list {
    .item {
      width: 300px;
      height: 130px;
      margin-right: 15px;
      margin-bottom: 15px;
      background: url("~assets/images/coupon-back1.png") center/cover no-repeat;
      box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);

      &.svip {
        background-image: url("~assets/images/vipCouB.png");

        .label {
          background-color: #fee2b6;
          color: #863c0d;
        }

        .money {
          color: #863c0d;
        }

        .btn {
          color: #863c0d;
        }
      }

      &.disabled {
        background-image: url("~assets/images/coupon-back2.png");

        .label {
          background-color: rgba(145, 145, 145, 0.1);
          color: #acacac;
        }

        .text-cont {
          color: #d0d0d0;
        }

        .money {
          color: #bfbfbf;
        }

        .name {
          color: #bfbfbf;
        }

        .time {
          color: #d0d0d0;
        }
      }

      .text {
        flex: 1;
        padding-left: 14px;
      }

      .text-cont {
        margin-top: 14px;
        font-size: 14px;
        color: #969696;
      }

      .label {
        width: 62px;
        height: 24px;
        background-color: rgba(233, 51, 35, 0.1);
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        color: $user--color-primary;
      }

      .money {
        margin-right: 14px;
        font-size: 16px;
        color: $user--color-price;

        .num {
          font-weight: bold;
          font-size: 32px;
        }
      }

      .info {
        flex: 1;
        min-width: 0;
      }

      .name {
        margin-bottom: 6px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 16px;
        color: #282828;
        width: 107px;
      }

      .time {
        margin-top: 14px;
        font-size: 12px;
        color: #969696;
      }

      .btn {
        width: 52px;
        padding-right: 18px;
        padding-left: 18px;
        font-size: 16px;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }
}
.user-com-tab {
  border-radius: 8px;
}
.user-com-tab span {
  padding: 0 8px;
}
</style>
